<template>
    <div class="activity">
		<el-form :inline="true" :model="searchData" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="searchData.productId" placeholder="商品ID" clearable ></el-input>
			</el-form-item>
      <el-form-item>
				<el-input v-model="searchData.skuName" placeholder="商品名称" clearable></el-input>
			</el-form-item>
      <el-form-item>
				<el-select v-model="searchData.checkStatus" placeholder="审核状态" clearable>
					<el-option label="可编辑" value="0"></el-option>
					<el-option label="待审核" value="1"></el-option>
					<el-option label="审核通过" value="2"></el-option>
					<el-option label="审核未通过" value="3"></el-option>
				</el-select>
			</el-form-item>
      <el-form-item>
				<el-select v-model="searchData.commonStatus" placeholder="上下架状态" clearable>
					<el-option label="已上架" value="0"></el-option>
					<el-option label="已下架" value="1"></el-option>
					<el-option label="已删除" value="2"></el-option>
				</el-select>
			</el-form-item>
      <el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索 </el-button>
			</el-form-item>
      <el-form-item>
				<el-button type="primary" @click="addSpell" icon="el-icon-circle-plus-outline">新增拼团活动</el-button>
			</el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="productInfo.productId" label="商品ID" align="center" width="100px"></el-table-column>
      <el-table-column prop="id" label="商品图" align="center" width="100px">
        <template slot-scope="scope">
          <el-image :src="scope.row.productInfo.skuImage" style="width: 40px; height: 40px" :preview-src-list="[scope.row.productInfo.skuImage]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="productInfo.skuName" label="商品名称" align="center" width="150px"></el-table-column>
      <el-table-column prop="productInfo.propertiesValue" label="商品规格" align="center" width="150px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productInfo.inventory" label="库存" align="center"></el-table-column>
      <el-table-column label="售价" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.productInfo.salePrice}}元 + {{scope.row.productInfo.saleSweet}}糖果
        </template>
      </el-table-column>
      <el-table-column prop="expectPrice" label="预计红包奖励" align="center"></el-table-column>
      <el-table-column prop="rewardPrice" label="实际红包奖励" align="center"></el-table-column>
      <el-table-column label="拼团起止时间" align="center" width="320px">
        <template slot-scope="scope">
          {{scope.row.startDate}} 至 {{scope.row.endDate}}
        </template>
      </el-table-column>
      <el-table-column label="拼团状态" align="center" width="100px">
        <template slot-scope="scope">
          {{scope.row.commonStatus}}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" width="130px">
        <template slot-scope="scope">
          <!-- <div  style="display:flex;justify-content: center;align-items: center;">
            <div>{{checkStatusText[scope.row.checkStatus]}}</div>
            <el-tooltip v-if="scope.row.checkStatus == 3" class="item" effect="dark" :content="scope.row.checkReason" placement="top">
              <i class="el-icon-question" style="color:red;cursor: pointer;"></i>
            </el-tooltip>
          </div> -->
          <div  style="display:flex;justify-content: center;">
            <div>{{checkStatusText[scope.row.checkStatus]}}</div>
            <el-popover
              v-if="scope.row.checkStatus == 3"
              placement="bottom"
              title="审核未通过原因"
              width="200"
              trigger="click"
              :content="scope.row.checkReason">
              <i class="el-icon-question" slot="reference" style="color:red;cursor: pointer;"></i>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150px" fixed="right">
        <template slot-scope="scope">
          <!-- 待审核有撤销按钮 -->
          <el-button  
            v-if="scope.row.commonStatus == '未开始' && scope.row.checkStatus == 1" 
            type="text" size="mini" @click="spellGroupRecall(scope.row)">撤销提交</el-button>
            <!-- 审核失败 -->
            <el-button  
            v-if="scope.row.commonStatus == '未开始' && (scope.row.checkStatus == 3 || scope.row.checkStatus == 0)"
            type="text" size="mini" icon="el-icon-edit" @click="edit(scope.row, 'edit')">编辑</el-button>
            <el-button type="text" size="mini" @click="edit(scope.row, 'view')">详情</el-button>
            <el-button type="text" size="mini" @click="viewChild(scope.row)">查看子团</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
			<el-pagination :page-size="searchData.size" :current-page="searchData.page" layout="prev, pager, next,total,jumper"
			 :total="total" background @current-change="handleCurrentChange">
			</el-pagination>
		</div>
    <el-dialog title="新增拼团活动" :visible.sync="detailDialog" width="60%" :close-on-click-modal="false">
      <el-form ref="formSpell" :model="formSpell" style="margin-top:20px" :rules="rules" label-position="right" label-width="160px">
        <el-divider content-position="left">商品</el-divider>
        <el-form-item label="选择商品">
          <el-button type="primary" icon="el-icon-circle-plus-outline" :disabled="formDisable" @click="addProduct">添加拼团商品</el-button>
        </el-form-item>
        <el-form-item label="商品图片">
            <el-image :src="formSpell.skuImage" style="width: 60px;"></el-image>
        </el-form-item>
        <el-form-item label="商品规格">
            <div>{{formSpell.propertiesValue}}</div>
        </el-form-item>
        <el-form-item label="商城售价">
            <div><span v-show="curSku.salePrice">{{curSku.salePrice}}元</span><span v-show="curSku.saleSweet"> + {{curSku.saleSweet}}糖果</span></div>
        </el-form-item>
        <el-form-item label="商品库存">
            <div>{{curSku.skuTotalStocks}}</div>
        </el-form-item>
        <el-divider content-position="left">活动</el-divider>
        <el-form-item label="拼团商品名称" prop="skuName">
            <el-input v-model="formSpell.skuName" :disabled="formDisable" placeholder="拼团商品名称" clearable style="width: 350px;"></el-input>
        </el-form-item>
        <el-form-item label="拼团商品副标题" prop="skuTitle">
            <el-input v-model="formSpell.skuTitle" :disabled="formDisable" placeholder="拼团商品副标题" clearable style="width: 350px;"></el-input>
        </el-form-item>
        <el-form-item label="拼团售价:" style="margin-top: 26px;">
          <el-form-item label="" prop="salePrice" label-width="0px">
            <el-input-number v-model="formSpell.salePrice" :disabled="formDisable" :precision="2" :step="0.01" :min="0"></el-input-number>
            <span style="padding-left: 10px">现金</span>
          </el-form-item>
          <span style="padding: 0 20px">+</span>
          <el-form-item label="" prop="saleSweet" label-width="0px">
            <el-input-number v-model="formSpell.saleSweet" :disabled="formDisable" :precision="4" :step="0.0001" :min="0"></el-input-number>
            <span style="padding-left: 10px">糖果</span>
          </el-form-item>
          
        </el-form-item>
        <!-- <div class="tip">拼团售价或糖果抵扣只能有一个是0</div> -->
        <!-- <el-form-item label="拼团售价" prop="salePrice">
            <el-input v-model="formSpell.salePrice" :disabled="formDisable" placeholder="请输入拼团出售价格" clearable style="width: 200px;"></el-input>
            <div class="tip">拼团售价或糖果抵扣只能有一个是0</div>
        </el-form-item>
        <el-form-item label="拼团商品糖果抵扣" prop="saleSweet">
          <el-input-number v-model="formSpell.saleSweet" :disabled="formDisable" :precision="4" :step="0.0001" :min="0"></el-input-number>
        </el-form-item> -->
        <el-form-item label="拼团库存" prop="inventory">
          <el-input-number v-model="formSpell.inventory" :disabled="formDisable" :precision="0" :step="1" :min="1"></el-input-number>
        </el-form-item>
        
        <el-form-item label="拼团时间" prop="date">
          <el-date-picker
              v-model="date"
              :disabled="formDisable"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '00:00:00']"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开团间隔天数">
            <el-input v-model="spellGroupConfigDetail.leastDayNum" disabled clearable style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="每次最大参团人数" prop="maxJoinNum">
          <el-input-number v-model="formSpell.maxJoinNum" :precision="0" :step="1" :min="1" :disabled="formDisable"></el-input-number>
          <!-- <el-input v-model="formSpell.maxJoinNum" type='number' :disabled="formDisable" placeholder="最大参团人数" clearable style="width: 200px;"></el-input> -->
        </el-form-item>
        
        <el-form-item label="红包奖励类型">
          <div style="color: #F56C6C">{{rewardTypeText[spellGroupConfigDetail.rewardType]}}</div>
        </el-form-item>
        <el-form-item label="拼团说明">
          <el-input v-model="spellGroupConfigDetail.instructions" type="textarea" :autosize="{ minRows: 1}" disabled  clearable style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="拼团须知">
          <el-input v-model="formSpell.notice" type="textarea" :disabled="formDisable" :autosize="{ minRows: 2}" placeholder="拼团须知" clearable style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="" v-if="editType != 'view'" style="margin-top: 15px">
          <el-button type="primary" @click="viewResult('formSpell')">预览拼团计算结果</el-button>
          <el-button  type="primary" @click="submit('formSpell')">{{editType == 'add' ? '创建拼团' : '修改并提交'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="" :visible.sync="calculateVisible" width="50%" :close-on-click-modal="false">
      <el-descriptions title="拼团创建预计信息" :column="2" border labelStyle="min-width:200px;max-width:250px;width:200px">
        <el-descriptions-item label="拼团售价">{{calculate.salePrice}}元</el-descriptions-item>
        <el-descriptions-item label="糖果抵扣">{{calculate.saleSweet}}</el-descriptions-item>
        <el-descriptions-item :label="spellGroupConfigDetail.rewardType != 3 ? '预付金账户余额' : '糖果账户余额'">{{calculate.balance}}{{unit[spellGroupConfigDetail.rewardType]}}</el-descriptions-item>
        <el-descriptions-item label="开团次数">{{calculate.openDays}}次</el-descriptions-item>
        <el-descriptions-item label="预计扣减库存数量">{{calculate.inventory}}件</el-descriptions-item>
        <el-descriptions-item label="每次最大参团人数">{{calculate.maxJoinNum}}人</el-descriptions-item>
        <el-descriptions-item label="预计拼团成功最多总人数">{{calculate.successNum}}人</el-descriptions-item>
        <el-descriptions-item label="预计拼团失败最多总人数">{{calculate.failedNum}}人</el-descriptions-item>
        <el-descriptions-item :label="spellGroupConfigDetail.rewardType != 3 ? '已创建或正在进行的拼团活动预计总金额': '已创建或正在进行的拼团活动预计总糖果'">{{calculate.existPrice}}{{unit[spellGroupConfigDetail.rewardType]}}</el-descriptions-item>
        <el-descriptions-item :label="spellGroupConfigDetail.rewardType != 3 ? '预计下发红包奖励总金额最大值': '预计下发奖励总糖果最大值'">{{calculate.rewardPrice}}{{unit[spellGroupConfigDetail.rewardType]}}</el-descriptions-item>
        <el-descriptions-item label="温馨提示" contentStyle="color: #F56C6C">{{calculate.tips}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog title="选择拼团商品" :visible.sync="productDialog" width="80%" :close-on-click-modal="false">
      <el-form ref="searchProduct" :model="searchProduct" inline>
        <el-form-item>
          <el-input v-model="searchProduct.product_name" placeholder="商品名称" clearable style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchProduct.product_code" placeholder="商品编码" clearable style="width: 170px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="productSearch">搜索商品</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-table ref="multipleTable"
            :data="productData"
            style="width: 100%"
            height="500"
            border
            @select="select"
            @select-all="selectAll">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="productMainImageUrl" label="商品主图" align="center" fixed width="120">
              <template slot-scope="scope">
                <el-image :src="scope.row.productMainImageUrl" style="width: 30px;"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
            <el-table-column prop="productCode" label="商品编码" align="center" min-width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="soldUnit" label="商品销量" align="center" width="150"></el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination :page-size="searchProduct.size" :current-page="searchProduct.page" layout="prev, pager, next,total,jumper"
            :total="productTotal" background @current-change="productHandleCurrentChange">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12">
          <el-table ref="multipleTableSku"
            v-loading="skuLoading"
            :data="skuData"
            style="width: 100%"
            height="500"
            border>
            <el-table-column prop="skuPicUrl" label="sku图片" align="center" width="120">
              <template slot-scope="scope">
                <el-image :src="scope.row.skuPicUrl" style="width: 30px;"></el-image>
              </template>
            </el-table-column>
						<el-table-column prop="propertiesValue" label="规格" align="center" width="160"></el-table-column>
						<el-table-column prop="skuSalePrice" label="销售价" align="center"></el-table-column>
						<el-table-column prop="skuSweetDeductRate" label="糖果抵扣率" align="center" width="300">
							<template slot-scope="scope">
								<span>当天实时参考价格:<span style="color: red;font-size: 14px;padding-left: 5px;">¥{{scope.row.salePrice}}</span>
									+ <span style="color: red;font-size: 14px;">{{scope.row.saleSweet}}</span>个糖果</span>
							</template>
						</el-table-column>
						<el-table-column prop="skuTotalStocks" label="库存" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <template slot-scope="scope">
               <el-button type="primary" size="mini" @click="selectSkuSubmit(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination :page-size="searchSku.size" :current-page="searchSku.page" layout="prev, pager, next,total,jumper"
            :total="skuTotal" background @current-change="skuHandleCurrentChange">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-dialog>     
  </div>
</template>
<script>
export default {
    data () {
        var validatePrice = (rule, value, callback) => {
          if (value == 0) {
            if (this.formSpell.saleSweet == 0) {
              callback(new Error('当抵扣糖果为0 时售价不能为0'));
            } else {
              callback();
            }
          } else {
            console.log(/(^[1-9][0-9]{0,7}$)|(^((0\.0[1-9]$)|(^0\.[1-9]\d?)$)|(^[1-9][0-9]{0,7}\.\d{1,2})$)/.test(value))
            if (/(^[1-9][0-9]{0,7}$)|(^((0\.0[1-9]$)|(^0\.[1-9]\d?)$)|(^[1-9][0-9]{0,7}\.\d{1,2})$)/.test(value)) {
              callback();
            } else {
              callback(new Error('请输入正确的金额（最多保留两位小数）'));
            }
            
          }
        };
        var validateSweet = (rule, value, callback) => {
          if (value == 0) {
            if (this.formSpell.salePrice == 0) {
              callback(new Error('当售价为0时糖果抵扣不能为0'));
            } else {
              callback();
            }
          } else {
            callback();
          }
        };
        return {
          formDisable: false,
          checkStatusText: {
            0: '可编辑',
            1: '待审核',
            2: '审核通过',
            3: '审核未通过'
          },
          commonStatusText: {
            0: '已上架',
            1: '已下架',
            2: '已删除',
          },
          date: [],
          detailDialog: false,
          searchData: {
            merchantId: localStorage.getItem('merchantId'),
            commonStatus: '',
            checkStatus: '',
            productId: '',
            skuName: '',
            startDate: '',
            endDate: '',
            page: 1,
            size: 10,
          },
          total: 0,
          tableData: [],
          // 选择商品
          productDialog: false,
          searchProduct: {
            mid: localStorage.getItem('merchantId'),
            product_name: '',
            product_code: '',
            product_status: 4,
            query_type: 1,
            page: 1,
            size: 10
          },
          productData: [], // 商品列表
          productTotal: 0,
          curProduct: {}, // 当前被选中的商品
          // sku
          skuLoading: false,
          searchSku: {
            page: 1,
            size: 10
          },
          skuData: [],
          skuTotal: 0,
          curSku: {},
          // 拼团参数
          spellGroupConfigDetail: {},
          formSpell: {
            // deductPrice: '',
            endDate: '',
            inventory: 1,
            merchantId: localStorage.getItem('merchantId'),
            notice: '',
            maxJoinNum: '',
            productId: '',
            properties: '',
            propertiesValue: '',
            salePrice: '',
            saleSweet: '',
            skuCode: '',
            skuId: '',
            skuImage: '',
            skuName: '',
            skuTitle: '',
            startDate: '',
            type: 1, // 拼团类型 1线上 2线下
          },
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() < Date.now()
            }
          },
          rules: {
            skuName: [{
              required: true, message: '输入商品名称',trigger: 'blur'
            }],
            skuTitle: [{
              required: true, message: '输入商品副标题',trigger: 'blur'
            }],
            salePrice: [{
              validator: validatePrice,trigger: 'blur'
            }],
            saleSweet: [{
              validator: validateSweet,trigger: 'blur'
            }],
            maxJoinNum: [
              {required: true, message: '最大参团人数不能为空',trigger: 'blur'}
            ],
            inventory: [
            {required: true, message: '库存不能为空',trigger: 'blur'}]
          },
          editType: '', // 弹窗中操作按钮状态edit编辑add添加view详情查看
          calculate: {},
          calculateVisible: false,
          unit: {
            1: '元',
            2: '元',
            3: '颗'
          },
          rewardTypeText: {
            1: '支付宝红包',
            2: '微信零钱',
            3: '糖果积分'
          }
        }
    },
    mounted() {
        this.getData()
        // this.getProduct()
        this.getSpellGroupConfig()
    },
    methods: {
      viewChild(row) {
        this.$router.push({
						path: 'spellGroupChild',
						query: {
							id: row.sgId
						}
					})
      },
      addSpell() {
        this.editType = 'add';
        this.cancel();
        this.formDisable = false;
        this.detailDialog = true;
      },
      edit(row, type) {
        this.editType = type;
        if (type == 'view') {
          this.formDisable = true
        } else {
          this.formDisable = false
        }
        this.curSku.salePrice = row.oldProduct.salePrice;
        this.curSku.saleSweet = row.oldProduct.saleSweet
        this.curSku.skuTotalStocks = row.oldProduct.skuTotalStocks
        this.date = [row.startDate, row.endDate]
        this.formSpell = {
            // deductPrice: '',
            sgId: row.sgId,
            endDate: row.endDate,
            startDate: row.startDate,
            maxJoinNum: row.maxJoinNum,
            inventory: row.productInfo.inventory,
            merchantId: localStorage.getItem('merchantId'),
            // notice: '',
            productId: row.productInfo.productId,
            properties: row.productInfo.properties,
            propertiesValue: row.productInfo.propertiesValue,
            salePrice:  row.productInfo.salePrice,
            saleSweet:  row.productInfo.saleSweet,
            skuCode:  row.productInfo.skuCode,
            skuId:  row.productInfo.skuId,
            skuImage:  row.productInfo.skuImage,
            skuName:  row.productInfo.skuName,
            skuTitle:  row.productInfo.skuTitle,
            type: 1, // 拼团类型 1线上 2线下
            notice: row.notice
          }
          this.detailDialog = true;
      },
      viewResult(from) {
        if (!this.formSpell.skuId) {
          this.$message.error('请选择拼团商品')
          return
        }
        if (this.date.length <=0) {
          this.$message.error('请选择时间')
          return
        }
        this.formSpell.startDate = this.date.length > 0 ? this.date[0] : '';
        this.formSpell.endDate = this.date.length > 0 ? this.date[1] : '';
        this.formSpell.isUpdate = this.editType == 'add' ? 0 : 1 // 0新增 1修改
        this.$refs[from].validate((valid) => {
					if (valid) {
            this.$http.post(this.$api.spellGroupCalculate, this.formSpell).then(res => {
             if (res.code == 0) {
                this.calculate = res.data;
                this.calculateVisible = true;
              } else {
                this.$message.error('失败！' + res.msg)
              }
             
            })
          }
        })
      },
      submit(from) {
        if (!this.formSpell.skuId) {
          this.$message.error('请选择拼团商品')
          return
        }
        if (this.date.length <=0) {
          this.$message.error('请选择时间')
          return
        }
        this.formSpell.startDate = this.date.length > 0 ? this.date[0] : '';
        this.formSpell.endDate = this.date.length > 0 ? this.date[1] : '';
        console.log(typeof this.formSpell.properties)
        // this.formSpell.properties = '"' + this.formSpell.properties + '"';
        this.$refs[from].validate((valid) => {
					if (valid) {
            if (!this.formSpell.sgId) {
              this.$http.post(this.$api.spellGroup, this.formSpell).then(res => {
                if (res.code == 0) {
                  this.$message({
                    type: 'success',
                    message: '提交成功！'
                  })
                  this.getData();
                  this.detailDialog = false;
                } else {
                  this.$message.error('提交失败！' + res.msg)
                }
              })
            } else {
              this.$http.put(this.$api.spellGroup, this.formSpell).then(res => {
                if (res.code == 0) {
                  this.$message({
                    type: 'success',
                    message: '修改成功！'
                  })
                  this.getData();
                  this.detailDialog = false;
                } else {
                  this.$message.error('修改失败！' + res.msg)
                }
              })
            }
          } else {
          }
        })
      },
      cancel() {
        this.date = [];
        this.curProduct = {};
        this.curSku = {};

        this.searchSku.page = 1;
        this.skuData = [];
        this.skuTotal = 0;

        this.searchProduct.page = 1;
        this.productData = [];
        this.productTotal = 0;

        this.formSpell = {
            // deductPrice: '',
            endDate: '',
            inventory: 1,
            maxJoinNum: '',
            merchantId: localStorage.getItem('merchantId'),
            notice: '',
            productId: '',
            properties: '',
            propertiesValue: '',
            salePrice: '',
            saleSweet: '',
            skuCode: '',
            skuId: '',
            skuImage: '',
            skuName: '',
            skuTitle: '',
            startDate: '',
            type: 1, // 拼团类型 1线上 2线下
          }
      },
      // 获取拼团配置
      getSpellGroupConfig() {
				this.$http.get(this.$api.spellGroupConfig).then(res => {
          this.spellGroupConfigDetail = res.data;
				})
			},
      getData() {
        this.$http.get(this.$api.spellGroup, this.searchData).then(res => {
            this.tableData = res.data;
            this.total = res.extraInfo;
        })
      },
      onSearch() {
          this.searchData.page = 1;
          this.getData();
      },
      handleCurrentChange(val) {
          this.searchData.page = val;
          this.getData();
      },
      // 选择商品
      addProduct() {
        this.getProduct();
        this.productDialog = true;
      },
      getProduct() {
				this.$http.get(this.$api.mallList, this.searchProduct).then(res => {
					this.productData = res.data;
					this.productTotal = res.extraInfo;
				})
			},
      productHandleCurrentChange(val) {
        this.searchProduct.page = val;
        this.getProduct();
      },
      productSearch() {
        this.searchProduct.page = 1;
        this.getProduct();
      },
      handleSelectionChange(val) {
         this.multipleSelection = val;
      },
      select(selection, row) {
        if (selection.length > 1) {
          let del_row = selection.shift()
          this.$refs.multipleTable.toggleRowSelection(del_row, false)
        }
        this.curProduct = row;
        this.skuInfo()
      },
      selectAll(selection){
        if (selection.length > 1) {
          selection.length = 1;
          this.curProduct = selection[0];
          this.skuInfo()
        }
      },
      //平台获取商品SKU信息
			skuInfo() {
        this.skuLoading = true;
				this.$http.get(this.$api.skuInfo, {
					...this.searchSku,
					product_id: this.curProduct.id
				}).then(res => {
          this.skuLoading = false;
					this.skuData = res.data;
					this.skuTotal = res.extraInfo
				})
			},
			skuHandleCurrentChange(val) {
				this.searchSku.page = val;
				this.skuInfo();
			},
      selectSkuSubmit(row) {
        this.curSku = row;
        let sku = row;
        this.formSpell.productId = sku.productId;
        this.formSpell.properties = sku.properties;
        this.formSpell.propertiesValue = sku.propertiesValue;
        this.formSpell.salePrice = sku.salePrice;
        this.formSpell.saleSweet = sku.saleSweet;
        this.formSpell.skuCode = sku.skuCode;
        this.formSpell.properties = sku.properties;
        this.formSpell.skuId = sku.id;
        this.formSpell.skuImage = sku.skuPicUrl;
        
        this.formSpell.skuName = this.curProduct.productName;
        this.formSpell.skuTitle = this.curProduct.productTitle;
        this.productDialog = false;
      },
      spellGroupRecall(row) {
        this.$confirm('请确认是否要取消拼团审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$http.get(this.$api.spellGroupRecall, {
                sgId: row.sgId
            }).then(res => {
                if (res.code == 0) {
                    this.getData()
                    this.$message({
                        message: '取消成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('确认失败,' + res.msg);
                }

            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });
        });
      }
    }
    
}
</script>
<style scoped>
	.activity {
		padding: 15px;
	}

	.pages {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30px;
	}
  >>> .el-divider--horizontal {
    margin-bottom: 40px;
  }
  >>> .el-divider__text{
    font-size: 20px;
  }
	.activity>>>.el-image-viewer__close{
		color: white;
	}
  >>>.el-form-item__content {
    display: flex;
  }
  .tip {
    margin-left: 100px;
    color: red;
  }
</style>